<template>
  <div>
    <el-form ref="editForm" :model="editForm" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="助记符" prop="spell">
            <el-input v-model="editForm.spell" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="editForm.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数据类型" prop="dataType">
            <el-select v-model="editForm.dataType" placeholder="请选择">
              <el-option
                v-for="dict in [
                  {
                    value: 1,
                    label: '数字',
                  },
                  {
                    value: 2,
                    label: '文字',
                  },
                ]"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类型" prop="category">
            <el-select v-model="editForm.category" placeholder="请选择">
              <el-option
                v-for="dict in [
                  {
                    value: 1,
                    label: '值',
                  },
                  {
                    value: 2,
                    label: '值',
                  },
                ]"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上限值" prop="rangMax">
            <el-input v-model="editForm.rangMax" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下限值" prop="rangMin">
            <el-input v-model="editForm.rangMin" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="单位" prop="permittedUnit">
            <el-input v-model="editForm.permittedUnit" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="顺序" prop="displayOrder">
            <el-input v-model="editForm.displayOrder" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="description">
            <el-input
              v-model="editForm.description"
              type="textarea"
              placeholder="请输入"
              show-word-limit
              maxlength="200"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "EditForm",
  props: {
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {},
      // 表单校验
      rules: {
        // name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        // spell: [{ required: true, message: "助记符不能为空", trigger: "blur" }],
        // dataType: [
        //   { required: true, message: "数据类型不能为空", trigger: "blur" },
        // ],
        // category: [
        //   { required: true, message: "项目类型不能为空", trigger: "blur" },
        // ],
        // rangMax: [
        //   { required: true, message: "上限值不能为空", trigger: "blur" },
        // ],
        // rangMin: [
        //   { required: true, message: "下限值不能为空", trigger: "blur" },
        // ],
        // permittedUnit: [
        //   { required: true, message: "单位不能为空", trigger: "blur" },
        // ],
        // displayOrder: [
        //   { required: true, message: "顺序不能为空", trigger: "blur" },
        // ],
        // description: [
        //   { required: true, message: "备注不能为空", trigger: "blur" },
        // ],
      },
      // 编辑 form
      editForm: {
        ...this.form,
      },
    };
  },
  methods: {
    validate(callback) {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          callback(valid);
        } else {
          return false;
        }
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.editForm = {
        id: undefined,
        name: undefined,
        spell: undefined,
        dataType: undefined,
        category: undefined,
        displayOrder: undefined,
        detailItems: [],
      };
      this.resetForm("editForm");
    },
  },
};
</script>

<style>
</style>
